<template>
  <div>
    <div class="person_wrap">
      <div class="person_left">
        <personDepart
          @sendWord="getWord"
          @sendDepartId="getDepartid"
        />
      </div>
      <div class="person_right">

        <personList
          :list="personList"
          :total="total"
          @sendPage="getPage"
          @sendSize="getSize"
        />
      </div>
    </div>
  </div>
</template>
<script>

import personDepart from './child/personDepart.vue'
import personList from './child/personList.vue'
import { getPersonApi } from '@/api/personnel'
export default {
  components: { personDepart, personList },
  data() {
    return {
      page: 1, // 分页
      pagesize: 5, // 每页条数
      departmentId: 1, // 部门id
      keyword: '', // 搜索条件
      personList: [], // 员工列表
      total: 0// 数据总条数
    }
  },
  created() {
    this.getList()
    // 监听 导入成功了 跳转最后一页
    this.$bus.$on('importUserSuccess', () => {
      this.page = Math.ceil(this.total / this.pagesize)
      this.getList()
    })
  },
  methods: {

    async getList() { // 获取员工列表
      const res = await getPersonApi({
        page: this.page,
        pagesize: this.pagesize,
        departmentId: this.departmentId,
        keyword: this.keyword
      })
      console.log(res, '员工列表')
      this.personList = res.data.rows
      this.total = res.data.total
    },
    getPage(page) { // 子传父的页码
      this.page = page
      this.getList()
    },
    getSize(size) {
      this.pagesize = size
      this.getList()
    },
    getWord(word) { // 搜索功能
      this.keyword = word
      this.getList()
    },
    getDepartid(departid) { // 部门id
      this.departmentId = departid
      this.getList()
    }
  }
}
</script>
<style lang="scss">
  .person_wrap{
    width: 100%;
    display: flex;
    .person_left{
      width: 277px;
      height: calc(100vh - 50px);
      // background: red;
    }
    .person_right{
      flex:1;
      height: calc(100vh - 50px);
      // background: blue;

    }
  }
</style>
